<template>
  <div class="phone_login">
    <van-nav-bar title="手机号登陆" left-arrow @click-left="$router.history.go(-1)" />
    <div class="form">
      <p class="tip">若输入未注册的手机号会先注册手机号</p>
      <van-field
        v-model="phone"
        label="手机号"
        type="tel"
        :maxlength="11"
        :disabled="nextSteup!== ''"
        @input="phoneinput"
        placeholder="请输入手机号"
        :error-message="phoneErrorMsg"
      />
      <van-field
        v-if="nextSteup ==='login'"
        type="password"
        v-model="password"
        label="密码"
        placeholder="请输入密码"
      />
      <van-field
        v-if="nextSteup ==='regist'"
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <van-button
          @click="getSysCode"
          :loading="smsSending"
          loading-text="发送中"
          slot="button"
          size="small"
          type="primary"
          :style="{width:'100px'}"
          :disabled="smsSended"
        >
          <span v-if="!smsSended">发送验证码</span>
          <van-count-down v-if="smsSended" @finish="countFinish" :time="time" format="已发送（ss)s" />
        </van-button>
      </van-field>
      <div v-if="nextSteup" class="next_buttons flex-between">
        <CoustomButton @click="preSteup" type="hight" width="45%" :radius="25" class="submit">上一步</CoustomButton>
        <CoustomButton
          @click="loginSubmit"
          v-if="nextSteup=== 'login'"
          type="trans"
          width="45%"
          :radius="25"
          class="submit"
        >登陆</CoustomButton>
        <CoustomButton
          @click="registSubmit"
          v-if="nextSteup=== 'regist'"
          type="trans"
          width="45%"
          :radius="25"
          class="submit"
        >注册</CoustomButton>
      </div>
      <CoustomButton
        v-if="!nextSteup"
        @click="nextSteupFn"
        type="trans"
        width="100%"
        :radius="25"
        class="submit"
      >下一步</CoustomButton>
    </div>
  </div>
</template>

<script>
import { checkoutPhoneNumber } from "../../util/util";
import jscookie from "js-cookie";
import store from "store2";
export default {
  data() {
    return {
      phone: "", //用户输入的手机号
      password: "", //用户输入的密码
      sms: "", //验证码
      phoneErrorMsg: "", //手机号格式错误提示文案
      canSubmit: false, //是否可以提交
      nextSteup: "", //regist:注册, login:登陆, 空表示未到下一步
      smsSending: false, //验证码发送中
      smsSended: false, //验证码是否发送成功
      time: 59 * 1000, //重新发送验证码倒计时
      registing: false //注册中
    };
  },
  mounted() {},
  methods: {
    //手机号输入事件
    phoneinput(val) {
      if (!checkoutPhoneNumber(val)) {
        this.phoneErrorMsg = "手机号格式错误";
        this.canSubmit = false;
      } else {
        this.phoneErrorMsg = "";
        this.canSubmit = true;
      }
    },

    //上一步
    preSteup() {
      this.nextSteup = "";
      this.canSubmit = false;
      this.phone = "";
      this.password = "";
      this.sms = "";
      this.phoneErrorMsg = "";
    },

    //下一步
    async nextSteupFn() {
      if (this.canSubmit) {
        let res = await this.$get("/cellphone/existence/check", {
          phone: this.phone
        });
        if (res.exist === 1) {
          this.nextSteup = "login";
        } else {
          this.nextSteup = "regist";
        }
      }
    },

    //登陆提交
    async loginSubmit() {
      let res = await this.$get("/login/cellphone", {
        phone: this.phone,
        password: this.password
      });
      if (res.code === 200) {
        store('account',res.account)
        this.$toast("登录成功");
        location.replace(this.$route.query.referer?decodeURIComponent(this.$route.query.referer):'/');
      } else {
        this.$toast(res.message);
      }
    },

    //获取验证码
    async getSysCode() {
      this.smsSending = true;
      let res = await this.$get("/captcha/sent", { phone: this.phone });
      this.smsSending = false;
      if (res.code === 200) {
        this.smsSended = true;
        this.$toast("验证码已发送");
      } else {
        this.$toast(res.message);
      }
    },

    //验证码倒计时结束
    countFinish() {
      this.smsSended = false;
    },

    //注册提交
    async registSubmit() {
      this.registing = true;
      let verify = await this.$get("/captcha/verify", {
        phone: this.phone,
        captcha: this.sms
      });
      if (verify.code === 200) {
        let res = await this.$get("/register/cellphone", {
          phone: this.phone,
          password: this.password,
          captcha: this.sms,
          nickname: ""
        });
        if (res.code === 200) {
          this.$toast("注册成功");
          location.replace(this.$route.query.referer?decodeURIComponent(this.$route.query.referer):'/');
        } else {
          this.$toast(res.message);
        }
      } else {
        this.$toast(verify.message);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.form {
  width: 90%;
  margin: 40px auto 0;
  .tip {
    font-size: 13px;
    color: $lowColor;
    padding: 0 16px;
    margin-bottom: 18px;
  }
}
.submit {
  margin: 40px auto;
  display: block;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.van-count-down {
  font-size: 12px;
  color: #fff;
}
</style>